<div #tooltip class="tooltip" > 
  <i class="material-icons tooltip-icon" (click)="toggleVis()" 
    ix-auto
    ix-auto-type="tooltip-icon"
    ix-auto-identifier="{{header}}">help_outline</i>

  <div class="tooltip-container fn-theme-primary" [ngClass]="{'wizard': isWizard, 'moved': isMoved}">
    <div cdkDrag 
      (cdkDragStarted)="hideTail($event)" #tooltiptext
      class ="tooltiptext {{positionString}}" [class.show]="isShowTooltip">

      <div id="tooltip-header" cdkDragHandle>
        <div class="tooltip-header-text">{{"Help" | translate}}{{ header ? ': ' + (header | translate) : ''}}</div>
      </div>

        <div class="pin" (click)="toggleVis()">
          <mat-icon role="img" fontSet="mdi-set" fontIcon="mdi-close"
          ix-auto
          ix-auto-type="tooltip-close"
          ix-auto-identifier="{{header}}"></mat-icon>
          </div>

      <div class="tooltip-message" [innerHTML]="message | translate | docreplace"
        ix-auto
        ix-auto-type="tooltip-message"
        ix-auto-identifier="{{header}}"></div>

    </div>
  </div>

</div>


